import React, {Component} from 'react';
import {login} from "../../api/user";

class Login extends Component {


    loginHandler = async (e) => {
        e.preventDefault();
        /*
        *非受控组件的使用第而步：我们可以在当前的组件实例对象 this.refs 上面获取到通过 ref 属性定义的dom对象。
        *
        *
        *
        * */
        console.log(this.refs);
        console.log('loginHandler');
        let username = this.refs.username.value;
        let password = this.refs.password.value;

        if (username == '' || password == '') {
            alert('请输入用户名和密码！');
            return false;
        }
        console.log(username, password);
        let info = await login({username, password});
        /*
        * gogery@163.com
        * admin
        *
        * */
        console.log(info);
        if( info.data.statusCode == 200){
            // 登录成功
            alert('登录成功！');
            // 记录一下用户的token
            localStorage.setItem('userToken', info.data.data.token);

        }else{
            // 登录失败
            alert('登录失败');
        }

    }

    render() {
        return (
            <div>
                <h1>登录组件-页面级别</h1>
                <p>
                    在 react 里面除了可以使用受控组件收集表单信息。还可以使用非受控的方式进行收集。

                    如果表单控件里面的value的获取不是通过 state进行控制的，而是我们通过ref进行dom操作获取的，则我们称之为 非受控组件 。

                </p>
                <form action="">
                    <div>
                        {/*非受控组件的使用第一步：在表单控件上面定义 ref属性，属性值用户自定义*/}
                        用户名：<input type="text" ref="username"/>
                    </div>
                    <div>
                        密码：<input type="password" ref="password"/>
                    </div>
                    <div>
                        <button onClick={this.loginHandler}>登录</button>
                    </div>
                </form>
            </div>
        );
    }
}

export default Login;
